<template>
	<div class="office">
		<div class="bar">
      <template v-if="tableData.length > 0">
        <div v-for="(nfItem, id) in tableData" :key="id" class="item">
          <div class="title">{{ nfItem.theme }}</div>
          <div class="desc">
            {{ nfItem.msg }}
          </div>
        </div>
      </template>
      <div v-else style="color: #909399; font-size: 15px; height: 350px;line-height: 350px;width: 100%;text-align: center;">
        暂无数据
      </div> 
			<!-- <div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					2024年10月1日至10月24日，呼和浩特开K7907次停运；2024年10月3日至10月26日，鄂尔多斯开K7908次停运12。
				</div>
			</div>
			<div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					验票上车后，及时将身份证、车票等证件放回箱包里，不得随意乱放。贵重物品在旅客离开座位时应随身携带，行李要放在视线随时可及之处，列车进站停车期间，务必盯紧行李‌。
				</div>
			</div>
			<div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					因台风影响，铁路上海站计划对途经京沪高铁、沪宁城际、沪宁沿江高铁等线路的部分旅客列车采取临时停运措施5
				</div>
			</div> -->
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { getNotifyList, getMyMessage } from '@/api/train'

	const tableData = ref<any>([])

	onMounted(() => {
    const userinfo = localStorage.getItem('userinfo');
    if (!userinfo) return;
		let params = {
			pageSize: 10,
			pageNum: 1,
			userId: JSON.parse(userinfo).userId,
		}
		getMyMessage(params).then((res: any) => {
			console.log("getNotifyList========", res.data.records)
			tableData.value = res.data.records.slice(0, 3);
		})
	})

</script>

<style lang="scss" scoped>
	.office {
		height: 815px;
	}
	.bar {
		height: 103px;
		width: 100%;
		background-image: url(@img/global/table-head.png);
		background-size: 101.5% 100%;
		background-position-x: center;
		display: flex;
		margin-top: 20px;
		.item {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			.title {
				font-size: 32px;
			}
			.desc {
				position: absolute;
				bottom: 0;
				transform: translateY(113%);
				width: 570px;
				height: 585px;
				text-align: justify;
				line-height: 100px;
				font-size: 32px;
				border-radius: 16px;
				padding: 0 50px;
				box-sizing: border-box;
				background-size: 100% 100%;
				background: url(@img/global/办公信息栏-bg1.png);
				background-size: 100% 100%;
			}
			&:nth-child(2) {
				.desc {
					background: url(@img/global/办公信息栏-bg2.png);
					background-size: 100% 100%;
				}
			}
			&:nth-child(3) {
				.desc {
					background: url(@img/global/办公信息栏-bg3.png);
					background-size: 100% 100%;
				}
			}
			&::before {
				content: '';
				width: 50px;
				height: 50px;
				position: absolute;
				background-image: url(@img/global/arrow1.png);
				background-size: 100% 100%;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 130%);
			}
			&:nth-child(2)::before {
				background-image: url(@img/global/arrow2.png);
			}
			&:nth-child(3)::before {
				background-image: url(@img/global/arrow3.png);
			}
		}
	}
</style>
